<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/resetStyle.css"/>
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
		<script src="js/jquery-3.4.0.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
	</head>
	<body>
		<!--绑定按钮-->
		<div class="login_btn">
			<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">马上体验</button>
		</div>
		
		<!--弹出框-->
		<div class="login_box">
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  		<div class="modal-dialog" role="document">
			    	<div class="modal-content">
			    		<div class="modal-header">
				        	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				      	</div>
				      	<div class="modal-body">
				        	<ul class="nav nav-tabs" role="tablist">
							    <li role="presentation" class="text-center active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">首次体验请先注册</a></li>
							    <li role="presentation" class="text-center"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">快速登陆</a></li>
						  	</ul>
							<div class="tab-content">
							    <div role="tabpanel" class="tab-pane active" id="home">
							    	<div class="reg_group">
								    	<form>
								    		<div>
								    			<span>*手机：</span>
								    			<input type="text" placeholder="手机号码" />
								    		</div>
								    		<i></i>
								    		<div>
								    			<span>*手机验证：</span>
								    			<input type="text" placeholder="短信验证" />
								    			<button>验证</button>
								    		</div>
								    		<i></i>
								    		<div>
								    			<span>*姓名：</span>
								    			<input type="text" placeholder="您的姓名" />
								    		</div>
								    		<i></i>
								    		<div>
								    			<span>*单位：</span>
								    			<input type="text" placeholder="公司单位" />
								    		</div>
								    		<i></i>
								    		<div>
								    			<span>*邮箱：</span>
								    			<input type="text" placeholder="邮箱地址" />
								    		</div>
								    	</form>
							    	</div>
							    	<button type="button" class="btn btn-primary btn-block btn-lg">注册</button>
							    </div>
							    <div role="tabpanel" class="tab-pane" id="profile">
							    	<div class="login_group">
							    		<form>
									    	<div class="form-group form-group-lg">
											    <label for="exampleInputEmail1">用户名</label>
											    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="账号">
											</div>
											<div class="form-group form-group-lg">
											    <label for="exampleInputPassword1">密&ensp;&ensp;码</label>
											    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
											</div>
											<div class="checkbox">
												<label>
												    <input type="checkbox"> 记住密码
												</label>
											</div>
											<button type="button" class="btn btn-primary btn-block btn-lg">登陆</button>
										</form>
							    	</div>
							    </div>
						  	</div>
				      	</div>
			    	</div>
		  		</div>
		  	</div>
	  	</div>
	</body>
</html>
